<template>
  <span
    :class="[bem.b(),symbolName]" 
    :style="style"
  >
  <svg aria-hidden="true" class="svg-icon" :width="size" :height="size">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { createNamespace } from '@/util/create'
import { iconProps } from './icon'

defineOptions({
    name: 'a-icon'
})
const bem = createNamespace('icon')
const props = defineProps(iconProps)
const symbolName = computed(() => `${props.prefix}-${props.name}`)
const symbolId = computed(() => `#${symbolName.value}`)


// 计算属性 来计算一个样式来处理
const style = computed(() => {
    if (!props.size && !props.color) return {}
    return {
        ...(props.size ? { 'font-size': props.size + 'px' } : {}),
        ...(props.color ? { color: props.color } : {})
    }
})
</script>

<style lang="scss">
@import '@/assets/css/icon.css';
</style>